import 'package:flutter/material.dart';
import 'package:flutter_lui/flutter_lui.dart';
import 'package:flutter_lui/src/l_style.dart';

/// 在一屏内显示胶囊按钮样式的tab切换
class LCircleButtonTabbar extends StatefulWidget {
  /// 当前选择的索引
  final int? select;

  /// tab选项
  final List<String> items;

  /// 背景颜色
  final Color? backgroundColor;

  /// 选中颜色
  final Color? activeColor;

  /// 文字颜色
  final Color? textColor;

  /// 选中文字颜色
  final Color? activeTextColor;

  /// 文字大小
  final double? fontSize;

  /// 选中文字大小
  final double? activeFontSize;

  /// 宽度
  final double? width;

  /// 高度
  final double? height;

  /// 点击回调
  final void Function(String item, int index)? onTap;
  const LCircleButtonTabbar(
      {required this.items,
      this.width,
      this.height,
      this.select,
      this.activeColor,
      this.activeFontSize,
      this.activeTextColor,
      this.backgroundColor,
      this.fontSize,
      this.onTap,
      this.textColor,
      Key? key})
      : super(key: key);

  @override
  State<StatefulWidget> createState() => _CircleButtonTabbar();
}

class _CircleButtonTabbar extends State<LCircleButtonTabbar>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

  int select = 0;
  int oldSelect = 0;

  double v = 0;

  @override
  void initState() {
    super.initState();
    select = widget.select ?? 0;
    oldSelect = widget.select ?? 0;
    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 150));

    controller.addListener(() {
      setState(() {
        v = controller.value;
      });
    });
  }

  @override
  void didUpdateWidget(covariant LCircleButtonTabbar oldWidget) {
    super.didUpdateWidget(oldWidget);
    var nSelect = widget.select ?? 0;
    oldSelect = oldWidget.select ?? 0;
    select = nSelect;
    if (oldWidget.select != nSelect) {
      controller.reset();
      controller.forward();
      setState(() {});
    }
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var useBackgroundColor =
        widget.backgroundColor ?? LUI.instance.backgroundColor;
    var useActiveColor = widget.activeColor ?? LUI.instance.primaryColor;
    var useTextColor = widget.textColor ?? LUI.instance.textColor;
    var useActiveTextColor =
        widget.activeTextColor ?? widget.textColor ?? Colors.white;
    var useFontSize = widget.fontSize ?? LStyle.fontSize;
    var useActiveFontSize = widget.activeFontSize ?? useFontSize;
    var useItemWidth = (widget.width ?? PageSize.width) / widget.items.length;

    var useTmpWidth = (useItemWidth * select) -
        (((useItemWidth * select) - (useItemWidth * oldSelect)) * (1 - v));
    return LBox(
      width: widget.width,
      height: widget.height,
      backgroundColor: useBackgroundColor,
      borderRadius: [widget.height ?? 40],
      child: Stack(children: [
        Positioned(
            top: 0,
            left: useTmpWidth,
            child: LBox(
              width: useItemWidth,
              height: widget.height ?? 40,
              backgroundColor: useActiveColor,
              borderRadius: [widget.height ?? 40],
            )),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: List.generate(
              widget.items.length,
              (index) => LBox(
                    onTap: () {
                      oldSelect = select;
                      select = index;
                      widget.onTap?.call(widget.items[index], index);
                      controller.reset();
                      controller.forward();
                    },
                    width: useItemWidth,
                    backgroundColor: Colors.transparent,
                    alignment: Alignment.center,
                    color: select == index ? useActiveTextColor : useTextColor,
                    fontSize: select == index ? useActiveFontSize : useFontSize,
                    child: widget.items[index],
                  )),
        )
      ]),
    );
  }
}
